<template>
    <el-tabs style="height:calc(100% - 5px); " v-model="editableTabsValue" type="card" class="demo-tabs" closable
        @tab-remove="handleRemove">
        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            <template #label>
                <span class="custom-tabs-label" v-if="defaultStatus">
                    <el-icon class="eliconReset" @click="changeDefaultStatus(item.name, item.path)" style="cursor:default;"
                        v-show="item.name == editableTabsValue">
                        <Refresh />
                    </el-icon>
                    <span>&ensp;{{ item.title }}</span>
                </span>
                <span class="custom-tabs-label" v-else>
                    <el-icon class="eliconReset" style="cursor:default;" v-show="item.name == editableTabsValue">
                        <Loading />
                    </el-icon>
                    <span>&ensp;{{ item.title }}</span>
                </span>
            </template>
            <component :is="item.componentPath"></component>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { RouterLink, RouterView } from 'vue-router'
import { ref, defineAsyncComponent, markRaw } from 'vue'
import fun from "@/api/common.js"
import home from "@/components//home/index.vue"
export default {
    components: {
        home
    },
    data() {
        return {
            defaultStatus: true,
            editableTabsValue: "home",
            editableTabs: [{ title: "首页", name: "home", componentPath: "home", path: "" }]
        }
    },
    created() {
        let obj = fun.fun.getLocationSearch("name", "path")
        console.log(obj);
        this.addTab(decodeURI(obj.name), obj.path)
    },
    methods: {
        changeDefaultStatus(name, path) {
            console.log(1);
            this.defaultStatus = false
            let timeOutId = setTimeout(() => {
                this.defaultStatus = true
            }, 500)
            this.handleRemove(name)
            console.log(path);
            this.addTab(name, path)
        },
        addTab(name, componentPath) {
            if (!name || !componentPath) {
                return
            }
            let comps = this.editableTabs.filter(x => x.name == name)
            if (comps.length > 0) {
                this.editableTabsValue = name
            } else {
                this.editableTabs.push({
                    title: name,
                    name: name,
                    path: componentPath,
                    componentPath: markRaw(defineAsyncComponent(() => import(`${componentPath}`)))
                })
                this.editableTabsValue = name
            }
        },
        handleRemove(tabpanName) {
            if (tabpanName != 'home') {
                this.editableTabs = this.editableTabs.filter(x => x.name != tabpanName);
                this.editableTabsValue = this.editableTabs.at(-1).name || ""
            }
        }
    },
    watch: {
        '$route.query': {
            deep: true,
            handler(newv, oldv) {
                this.addTab(newv.name, newv.path)
            }
        }
    }
}

</script>
<style>
/* @import url(); 引入css类 */
.el-tabs__content {
    height: calc(95% - 0px);
}

.el-tab-pane {
    height: 100%;
}

.eliconReset:hover {
    color: #4eadca8e;
}</style>